<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ffmpeg测试</title>
</head>
<body>
<div>
    <canvas id="display" width="1080" height="450"></canvas>
</div>

<script src="./ffmpeg.js"></script>
<script>
    let display = document.getElementById("display")
    let render = new FFmpeg.WebGL({
        gl: display.getContext("webgl"),
        width: display.width,
        height: display.height,
    })
    Module = {};
    Module.onRuntimeInitialized = () => {
        console.log("onRuntimeInitialized")
        fetch("dream_it_possible.264").then(function (response) {
            console.debug(response)
            return response.arrayBuffer()
            // }).then((blob) => {
            //     console.debug(blob)
            //     return blob.arrayBuffer()
        }).then((data) => {
            console.log(data)
            let buf = new Uint8Array(data)
            let stream = Module._ffmpeg_init(27)
            console.log("buf", buf)
            console.log("stream", stream)

            let displayNumber = () => {
                return HEAP32[stream / 4 + 0]
            }
            // let yuv_data = () => {
            //     return HEAP32[stream / 4 + 1]
            // }
            let width = () => {
                return HEAP32[stream / 4 + 2]
            }
            let height = () => {
                return HEAP32[stream / 4 + 3]
            }
            // let formate = () => {
            //     return HEAP32[stream / 4 + 4]
            // }
            let size_y = () => {
                return HEAP32[stream / 4 + 5]
            }
            let size_u = () => {
                return HEAP32[stream / 4 + 6]
            }
            let size_v = () => {
                return HEAP32[stream / 4 + 7]
            }
            let data_y = () => {
                return HEAP32[stream / 4 + 8]
            }
            let data_u = () => {
                return HEAP32[stream / 4 + 9]
            }
            let data_v = () => {
                return HEAP32[stream / 4 + 10]
            }
            let state = () => {
                return HEAP32[stream / 4 + 11]
            }

            let ptr = Module._malloc(buf.byteLength)
            HEAP8.set(buf, ptr)
            Module._ffmpeg_input_data(stream, ptr, buf.byteLength)

            let frameIndex = 0
            let drawFrame = () => {
                if (Module._ffmpeg_decode_frame(stream) === 0) {
                    const tex_height = height()
                    const tex_width = width()
                    frameIndex++
                    console.log("_ffmpeg_decode_frame > ", frameIndex, tex_width, tex_height)

                    render.resize(tex_width, tex_height)

                    let offset = 0
                    let length = tex_width * tex_height
                    // let y = new Uint8Array(HEAP8.slice(yuv_data() + offset, yuv_data() + offset + length).buffer)
                    let y = new Uint8Array(HEAP8.slice(data_y(), data_y() + tex_height * size_y()).buffer)

                    offset += length
                    length = tex_width * tex_height / 4
                    // let u = new Uint8Array(HEAP8.slice(yuv_data() + offset, yuv_data() + offset + length).buffer)
                    let u = new Uint8Array(HEAP8.slice(data_u(), data_u() + tex_height * size_u()).buffer)

                    offset += length
                    length = tex_width * tex_height / 4
                    // let v = new Uint8Array(HEAP8.slice(yuv_data() + offset, yuv_data() + offset + length).buffer)
                    let v = new Uint8Array(HEAP8.slice(data_v(), data_v() + tex_height * size_v()).buffer)

                    render.render(y, u, v, size_y(), size_u(), size_v())

                    requestAnimationFrame(drawFrame)
                    return true
                } else {
                    console.log("inish")
                    Module._ffmpeg_release(stream)
                    return false
                }
            }

            requestAnimationFrame(drawFrame)

            // for (; Module._ffmpeg_h264_decode(stream) == 0;) {
            //     // console.log("decodeNumber " + displayNumber())
            //     // console.log("width " + width())
            //     // console.log("height " + height())
            // }
            // Module._ffmpeg_release(stream)
        })
    }
</script>
<script src="./bin/ffmpeg_wasm.js"></script>

</body>
</html>
